<template>
    <div>
        <el-dialog
            v-model="open"
            title="Tips"
            width="500"
        >
        <div>
            11111
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancel">Cancel</el-button>
                <el-button type="primary" @click="confirm">
                Confirm
                </el-button>
            </div>
        </template>
    </el-dialog>
    </div>
</template>

<script setup>
import { reactive,toRefs,onMounted,ref,watch,defineProps,defineEmits } from 'vue'
// 传入模版
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  }
});
const open = ref(false)
watch(
  () => props.modelValue,
  (newVal, oldVal) => {
    open.value = newVal
  }
)

const emits = defineEmits(["update:modelValue"])

function cancel(){
    emits("update:modelValue",false)
}
function confirm(){
    emits("update:modelValue",false)
}
</script>

<style scoped>
</style>